import { connect } from 'react-redux';
import { handleadd, handledecrement, handleasync } from '../../redux/actions';


// react-router-dom  react的路由插件
import React, { Component } from 'react';

class CountUi extends Component {
    constructor(props) {
        super(props);
    }

    handleAdd = () => {
        const num = this.select.value * 1;
        console.log(this.props);
        // this.props.add(num);
        this.props.handleadd(num);

    }
    handleDecrement = () => {
        const num = this.select.value * 1;
        // this.props.decrement(num);
        this.props.handledecrement(num);

    }
    handleOdd = () => {
        const num = this.select.value * 1;
        if (this.props.count % 2 == 1) {
            // this.props.add(num);
            this.props.handleadd(num)
        }

    }
    handleAsync = () => {
        const num = this.select.value * 1;
        // this.props.tasync(num);
        this.props.handleasync(num);

    }

    render() {
        return (
            <div>
                <h2>{this.props.count}</h2>
                <select ref={select => this.select = select}>
                    <option value='1'>1</option>
                    <option value='2'>2</option>
                    <option value='3'>3</option>
                </select>
                <button onClick={this.handleAdd}>add +</button>
                <button onClick={this.handleDecrement}>decrement -</button>
                <button onClick={this.handleOdd}>odd Add</button>
                <button onClick={this.handleAsync}>async decrement</button>
            </div>
        );
    }
}










// connect()() 创建并暴露一个Count的容器组件
export default connect(state => ({ count: state }), { handleadd, handledecrement, handleasync })(CountUi);